<template>
   <div>
     <!-- 轮播图区域 -->
     <mt-swipe :auto="4000">
        <mt-swipe-item v-for="item in lunboduList" :key="item.url">
          <img :src="item.img">
        </mt-swipe-item>
     
     </mt-swipe>

     <!-- 6宫格区域 -->
     <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">		                   
                        <img src="../../img/menu1.png" alt="" srcset="">
		                    <div class="mui-media-body">新闻资讯</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                      <img src="../../img/menu2.png" alt="" srcset="">
		                    <div class="mui-media-body">图片分享</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                     <img src="../../img/menu3.png" alt="" srcset="">
		                    <div class="mui-media-body">商品购买</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                     <img src="../../img/menu4.png" alt="" srcset="">
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                     <img src="../../img/menu5.png" alt="" srcset="">
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                     <img src="../../img/menu6.png" alt="" srcset="">
		                    <div class="mui-media-body">练习我们</div></a></li>		          
		        </ul> 
  </div>
</template>

<script>
 import { Toast } from 'mint-ui';

  export default{
    data(){
      return{
        lunboduList:[]
      };
    },
    created(){
      this.getLunbotu();
    },
    methods:{
      getLunbotu(){
        this.$http.get('http://www.liulongbin.top:3005/api/getlunbo').then(result=>{
          console.log(result.body);
          if(result.body.status===0){
            this.lunboduList=result.body.message;
            
          }else{
            Toast('加载失败');
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.mint-swipe{
  // 要是没有高度200的话，轮播图显示不出来
  height: 200px;
}
.mint-swipe-item{
  &:nth-child(1){
    background-color: red;
  }
   &:nth-child(2){
    background-color: yellow;
  }
   &:nth-child(3){
    background-color: blue;
  }
  // 轮播图大小
  img{
    width: 100%;
    height: 100%;
  }
}

.mui-grid-view.mui-grid-9{
  // 把背景色改成白色
  background-color: #ffffff;
  border: none;
  // 6宫格的图片大小改了
  img{
    width: 60px;
    height: 60px;
  }
   // 图片下的文字大小
  .mui-media-body{
    font-size: 13px;
  }
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  // 把中间的横竖线去掉
  border:0;
}
</style>
